<template>
  <div class="container">
    <!-- 上部分 -->
    <div class="top-section">
      <!-- 上部分内容 -->
      <!-- 占据页面高度的20% -->

      <div class="flex1">
        <div>
          <el-tabs v-model="activeName" >
            <el-tab-pane label="问题信息" name="first"></el-tab-pane>
            <el-tab-pane label="影响配置" name="second"></el-tab-pane>
            <el-tab-pane label="关联工单" name="third"></el-tab-pane>

          </el-tabs>
        </div>
        <div>
          <el-button type="primary" @click="drawer = true">处理<i class="el-icon-upload el-icon--right"></i></el-button>
          <el-button type="primary" @click="retu">返回<i class="el-icon-upload el-icon--right"></i></el-button>
        </div>
      </div>


    </div>

    <!-- 下部分 -->
    <div class="bottom-section">
      <!-- 下左部分 -->
      <div class="left-section">
        <first v-if="activeName === 'first'"></first>
        <second v-if="activeName === 'second'"></second>
        <third v-if="activeName === 'third'"></third>
      </div>

      <!-- 下右部分 -->
      <div class="bottomright">
        <!-- 下右部分内容 -->
        <!-- 占据下部分宽度的30% -->
        <div class="block">
          <div class="radio"
            style="margin-bottom: 25px; text-align: left; font-size: 16px; color: #303133; font-weight: 700;">
            处理日志

          </div>
          <div style="margin-left: 32px;">
          <timeline :data1="v" v-for="v in test" :key="v.id"></timeline>
        </div>
        </div>

      </div>
    </div>


    <el-drawer title="我是标题" :visible.sync="drawer" :direction="direction" :before-close="handleClose" size="50%">

      <body style="height: 80%;">
        <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
          <el-form-item label="处理方式:">
            <el-col :span="11">
              <el-select v-model="sizeForm.region" placeholder="选择处理方式">
                <el-option label="自我解决" value="自我解决"></el-option>
                <el-option label="转派同级其他人员" value="转派同级其他人员"></el-option>
                <el-option label="升级为二线" value="升级为二线"></el-option>
                <el-option label="升级为三线" value="升级为三线"></el-option>
                <el-option label="分派修复小组" value="分派修复小组"></el-option>
                <el-option label="升级为重大故障" value="升级为重大故障"></el-option>
              </el-select>
            </el-col>
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="8">
              <el-button type="primary" round>更多</el-button>
            </el-col>
          </el-form-item>
          <el-form-item label="根本原因:" class="height1" style="width: 90%;">
            <el-input type="textarea" v-model="sizeForm.value1" :rows="10"></el-input>
          </el-form-item>
          <el-form-item label="解决方案:" class="height1" style="width: 90%;">
            <el-input type="textarea" v-model="sizeForm.value2" :rows="10"></el-input>
          </el-form-item>

        </el-form>
      </body>
      <footer style="height: 20%;">
        <div style="width: 90%;">

          <el-button round @click="handle">保存修改</el-button>

        </div>
      </footer>
    </el-drawer>

  </div>
</template>
  
  
<script >

import first from '../problems/Handleproblem1.vue'
import second from '../problems/Handleproblem2.vue'
import third from '../problems/Handleproblem3.vue'
import timeline from '../encapsulated/Timeline'
export default {
  components: {
    first,
    second,
    third,
    timeline
  },
  data() {
    return {
      nowid:1,
      drawer: false,
      direction: 'rtl',
      test: [

      ],
      sizeForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        value1: '',
        value2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      select: '',
      database: [],
      activeName: 'first',
      formInline: {
        user: '',
        region: ''
      },
      activities: [{
        content: '活动按期开始',
        timestamp: '2018-04-15'
      }, {
        content: '通过审核',
        timestamp: '2018-04-13'
      }, {
        content: '创建成功',
        timestamp: '2018-04-11'
      }],
      reverse: false,


    };
  },

  methods: {
    a() {
      alert('1')
    },
    get() {
     
      this.$axios.get(`test`, ).then((res) => {
        this.database = res.data[this.nowid]

         
      })

    },
    get1() {
      this.$axios.get(`test2`).then((res) => {
        this.test = res.data
       
      })
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done();
        })
        .catch(() => { });
    },

    handle() {
      
      this.$axios.patch(`/test/${this.nowid}`, {
        link: this.sizeForm.region,
        handletime: this.currentTime(),
        handlebumen: '后台链表查询后返回1'
      }).then(() => {
        alert('修改成功')
        this.get()

        // this.$router.push('/home/repair/problem')
      })

      this.$axios.post(`test2`, {
        
        content: this.sizeForm.value2,
        data: this.currentTime(),
        name: "当前登录用户",
        url: ''
      }).then(() => {
        this.get1()
      })
    },

    retu() {
      this.$router.push('/home/repair/problem')
    },
    make() {
      
      this.$axios.patch(`test/${this.nowid}`, {
        state: '已提交'
      }).then(() => {
        this.$router.push('/home/repair/problem')
      })
    },
    /**
* 获取当前时间
*/
    currentTime() {
      var date = new Date();
      var year = date.getFullYear(); //月份从0~11，所以加一

      var dateArr = [
        date.getMonth() + 1,
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
      ];
      //如果格式是MM则需要此步骤，如果是M格式则此循环注释掉
      for (var i = 0; i < dateArr.length; i++) {
        if (dateArr[i] >= 1 && dateArr[i] <= 9) {
          dateArr[i] = "0" + dateArr[i];
        }
      }
      var strDate =
        year +
        "/" +
        dateArr[0] +
        "/" +
        dateArr[1] +
        " " +
        dateArr[2] +
        ":" +
        dateArr[3] +
        ":" +
        dateArr[4];
      return strDate;
    },



  },
  mounted() {
    

    this.get1()

  },



};
</script>
  
<style scoped>
.el-tabs__nav-wrap::after {
  width: auto;
}

::v-deep .el-drawer__header>:first-child {
  color: white;
}

::v-deep .el-icon-close:before {
  content: "\e6db";
  color: white;
}

.container {
  height: 100%;
  width: 100%;
}

.top-section {
  height: 10%;
  /* 上部分占据页面高度的20% */

  margin: 0px 5px;
}

.bottomright {
  all: unset;
  margin-left: 50px;
}

.bottom-section {
  height: 90%;
  /* 下部分占据剩余的80% */

  display: flex;

}

.left-section {
  width: 60%;
  /* 下左部分占据下部分宽度的70% */

  margin: 0px 5px;
}

.form-field {
  display: flex;
  width: 100%;
}

.form-row {
  display: flex;
  justify-content: space-between;
}

::v-deep .el-drawer__body {
  padding-left: 20px;
  text-align: right;

}

.right-section {
  width: 40%;
  /* 下右部分占据下部分宽度的30% */

  margin: 0px 5px;
}



.flex1 {
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: center;
}

.flex2 {
  display: flex;
  justify-content: left;

}

.demonstration {
  width: 20%;
}

.settingbutton {
  padding: 0px 0px;
  border: 0px solid;
  margin-left: 5px;
}

::v-deep .el-table tr {
  background-color: #FFF;
  height: 85px;
}

::v-deep .el-pagination {
  padding: 0px 5px;
}

::v-deep .el-select {
  margin-right: 10px;
  width: 100%;
}

::v-deep .el-descriptions__body {
  margin-left: 20px;
}

::v-deep .el-timeline {
  line-height: 20px
}

::v-deep .el-drawer__header {
  display: flex;
  padding: 10px;
  margin-bottom: 20px;
  background-color: #0970b8;
  text-align: left;
  height: 40px;
}

::v-deep .el-descriptions__table {
  margin-left: 20px;
}
</style>
  